<template>
    <div class="hello">
      <h1>My页面</h1>
      <my-breadcrumb v-for="(item,index) in tags"
        :key="index"
        :isEnable="item.isEnable"
        :msg="item.msg"
        @bclick="btnClick(index)" 
        @closeClick="closeClick(index)"
      ></my-breadcrumb>
    </div>
</template>
<script>
import MyBreadcrumb from '../../components/MyBreadcrumb.vue'

export default{
  name: 'App',
  components: {
    MyBreadcrumb
  },
  data(){
    return{
      tags:[
        {
          msg:'新增按钮',
          isEnable:true,
          path:'/新增'
        },
        {
          msg:'新增按钮1',
          isEnable:false,
          path:'/新增按钮1'
        },
        {
          msg:'新增按钮2',
          isEnable:false,
          path:'/新增按钮2'
        },
        {
          msg:'新增按钮3',
          isEnable:true,
          path:'/新增按钮3'
        }
      ]
    }
  }, 
  methods:{
    closeClick(index){
      const delItem = this.tags.splice(index, 1)[0];
      console.log('closeClick',delItem)
    },
    btnClick(index){
      const item = this.tags[index] ? this.tags[index] : this.tags[index - 1];
      console.log('btnClick',item)
    }
  }
}
</script>